<template>
  <div class="pagination-container pagination">
    <div v-if="selectArray.length" class="pagination-left">
      <span style="margin-right: 25px">已选择 {{ selectArray.length }} 条</span>
    </div>
    <el-pagination
      v-model::current-page="paginationInfo.size"
      v-model::page-size="paginationInfo.page"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :page-sizes="[10, 20, 50, 100]"
      :total="paginationInfo.total"
      v-bind="$attrs"
    />
  </div>
</template>
<script lang="ts" setup>
import { ref, computed, type PropType } from "vue";

/** 禁用根节点的穿透参数 */
defineOptions({
  inheritAttrs: false
});

interface FormSchema {
  size: number;
  page: number;
  total: number;
}

const paginationInfo = computed(() => {
  return props.paginationObj;
});

const props = defineProps({
  paginationObj: {
    type: Object as PropType<FormSchema>,
    default: () => {}
  },
  selectArray: {
    type: Array,
    default: () => []
  }
});
</script>

<style lang="scss" scoped>
.pagination-container {
  width: 100%;
  height: 32px;
  position: relative;
  background: #fff;
  margin-top: 16px;
  ::v-deep(.el-pagination) {
    float: right;
  }
}

.pagination-left {
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  float: left;
}
</style>
